<template>
  <view>
    <view style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;" :style="{
    background:`url(${!!ancestralHall.ct_detail.background_url ? ancestralHall.ct_detail.background_url : `${IMG_URL.value}/index/citang_bg.png`})no-repeat`,
    backgroundSize: '100%',
    filter: 'blur(5px)'
  }"></view>
    <view class="ct_detail wh_750 flex flex-column align-center pageHeight">
      <s-header-title is-fixed is-display-back title="祠堂" title-color="transparent"></s-header-title>
      <canvas id="lightingBackground" canvas-id="lightingBackground"
              style="position: absolute;top: -999999rpx;left: -999999rpx;"
              :style="{
              width: `${systemInfo.windowWidth}px`,
              height: `${systemInfo.windowHeight}px`
            }">
      </canvas>
      <canvas id="lighting" canvas-id="lighting"
              style="position: absolute;top: -999999rpx;left: -999999rpx;"
              :style="{
              width: `${systemInfo.windowWidth}px`,
              height: `${systemInfo.windowHeight}px`
            }">
      </canvas>
      <image :src="page.bgPath" class="ct_detail_image wh_750"
             v-if="ancestralHall.ct_detail.over_time <= 0 || !ancestralHall.ct_detail.over_time" :style="{
      width: `${systemInfo.windowWidth}px`,
      height: `${systemInfo.windowHeight}px`
    }"></image>

      <image v-else-if="!!page.path" :src="page.path" class="ct_detail_image wh_750" :style="{
      width: `${systemInfo.windowWidth}px`,
      height: `${systemInfo.windowHeight}px`
    }"></image>

      <view class="fixed unlit flex flex-column align-center">
        <view class="deng flex justify-around align-center hW_532"
              v-if="(!ancestralHall.ct_detail.over_time || ancestralHall.ct_detail.over_time <= 0) && !!ancestralHall.ct_detail">
          <!--        <image :src="`${IMG_URL}/index/citang_deng.png`" mode="widthFix"></image>-->
          <!--        <image :src="`${IMG_URL}/index/citang_deng.png`" mode="widthFix"></image>-->
        </view>
        <view class="deng flex justify-around align-center hW_532" v-else>
          <!--        <image :src="`${IMG_URL}/index/citang_dengup.png`" mode="widthFix"></image>-->
          <!--        <image :src="`${IMG_URL}/index/citang_dengup.png`" mode="widthFix"></image>-->
        </view>
        <view class="avatar flex flex-column align-center" @click.stop="setAvatar">
          <image :src="ancestralHall.ct_detail.image" class="content"></image>
          <image :src="`${IMG_URL}/index/citang_xiangkuang.png`" class="pictureFrame"></image>
          <text class="name">{{ ancestralHall.ct_detail.username }}</text>
        </view>
        <view class="lazhu flex justify-around align-center z-1"
              v-if="ancestralHall.ct_detail.over_time <= 0 || !ancestralHall.ct_detail.over_time">
          <image :src="`${IMG_URL}/index/citang_lazhu.png`"></image>
          <image :src="`${IMG_URL}/index/citang_lazhu.png`"></image>
        </view>
        <view class="lazhu flex justify-around align-center z-1" v-else>
          <image :src="`${IMG_URL}/index/citang_lazhuup.png`"></image>
          <image :src="`${IMG_URL}/index/citang_lazhuup.png`"></image>
        </view>
        <view class="zhuozi" v-if="ancestralHall.ct_detail.over_time <= 0 || !ancestralHall.ct_detail.over_time">
          <image :src="`${IMG_URL}/index/citang_zhuozi.png`"></image>
        </view>
        <view class="zhuozi" v-else>
          <image :src="`${IMG_URL}/index/citang_zhuoziup.png`"></image>
        </view>
        <view class="flowersList flex justify-center z_2" v-if="ancestralHall.flower.length > 0">
          <view v-for="(item, index) in ancestralHall.flower" :key="index">
            <image :src="item.image"
                   v-if="Number(item.overdue_time) > page.currentTime"
                   @click.stop="goPath(1)"></image>
          </view>
        </view>
      </view>
      <view class="countdown wh_232 hW_100 flex align-center flex-column justify-center">
        <view class="fs_24 fw_500" style="color: #AC5135;">
          {{ cm_time }}
        </view>
        <view class="bottomButton flex align-center justify-center" @click.stop="lighting">
          点亮长明灯
        </view>
      </view>


      <view class="bottomPopup flex  align-center justify-between">
        <view class="list flex align-center justify-center" v-for="(item, index) in ancestralHall.editList" :key="index"
              @click.stop="edit(index)">
          <view class="flex flex-column align-center giveALike" v-if="index == 0">
            <image :src="`${IMG_URL}/index/citang_aixin.png`"
                   style="width: 42rpx;height: 40rpx;"></image>
            <view class="mt_13">
              {{ item.name }}
            </view>
            <view class="fs_20 mt_11">
              {{ ancestralHall.ct_detail?.love_num || 0 }}
            </view>
          </view>
          <view class="flex flex-column align-center giveALike" v-else-if="index == 2">
            <image :src="`${IMG_URL}/index/citang_liuyan.png`"
                   style="width: 42rpx;height: 40rpx;"></image>
            <view class="mt_13">
              {{ item.name }}
            </view>
            <view class="fs_20 mt_11">
              {{ ancestralHall.ct_detail.leave || 0 }}
            </view>
          </view>
          <view class="flex flex-column align-center giveALike" v-else>
            <image :src="`${IMG_URL}/index/citang_xianhua.png`"
                   style="width: 42rpx;height: 40rpx;"></image>
            <view class="mt_13">
              {{ item.name }}
            </view>
            <view class="fs_20 mt_11">
              {{ ancestralHall.ct_detail.flower_num || 0 }}
            </view>
          </view>
        </view>
      </view>

      <presentABouquet ref="presentABouquets" :diyInfo="ancestralHall.diyInfo" :ct_light="ancestralHall.ct_light"
                       :ct_detail="ancestralHall.ct_detail"
                       :cm_time="cm_time"
                       @lighten="lighten"
                       @goVip="goVip"
      ></presentABouquet>

      <flowers-list ref="flowerss"
                    :diy-info="ancestralHall.diyInfo"
                    :ct_flower="ancestralHall.ct_flower"
                    :articlesOfTribute="ancestralHall.articlesOfTribute"
                    :ct_detail="ancestralHall.ct_detail"
                    @flowers="flowers"
      ></flowers-list>

      <view class="toggle flex align-center justify-center" @click.stop="toggleBG">
        <image :src="`${IMG_URL}/index/citang_toggle.png`"></image>
      </view>


      <!--     弹幕-->
      <view class="fixed" :style="{
          top: `calc(${systemInfo.statusBarHeight}px + 70rpx)`
        }" style="height: 147rpx;width: 750rpx;z-index: 10;" @click.stop="goRecords(2)">
        <view class="wh_750 hW_147 ml_10 flex" style="overflow: hidden">
          <scrolling ref="scrollings" :list="ancestralHall.barrageList" class="flex flex-sub"></scrolling>
        </view>
      </view>
      <!-- 评论 -->
      <view class="photoDetails_comments flex align-end justify-between z_20" :style="{
        bottom:page.commentsHeight+'px'
      }" v-if="page.commentsShow" @click.stop>
        <view class="photoDetails_comments_left ml_24">
        <textarea class="photoDetails_comments_left_input"
                  v-model="page.commentsValue" :focus="page.commentsFocus"
                  @blur="commentBlur"
                  placeholder="评论" :adjust-position="false" maxlength="200" auto-height></textarea>
        </view>
        <view class="photoDetails_comments_right mr_24 flex align-center justify-center" :style="{
       background: page.commentsValue == '' ? '#9F9F9F' : '#FF6D00'
      }" @click.stop="debounce(publishComments,1500,true)">
          <text class="photoDetails_comments_right_text">完成</text>
        </view>
      </view>

      <s-image-preview ref="imagePreview"></s-image-preview>

      <s-popup-vip :show="vipDisposition.isShow" @closePopup="closePopup">
        <template #default>
          <view class="memberPopup position-relative"
                v-if="!!vipDisposition.goodDetails && vipDisposition.goodDetails != {}">
            <image class="w-100 h-100" :src="`${nc_image_path}/nc_vip_banner.png`"></image>
            <view class="exchange flex align-center justify-between">
              <view class="flex align-end" v-if="!!vipDisposition.goodDetails.price">
                <text>￥</text>
                <text class="fs_60" style="line-height: 60rpx">{{ vipDisposition.goodDetails.price[0] }}</text>
              </view>
              <view @click.stop="exchangeImmediately">
                兑换
              </view>
            </view>
            <view class="chatDetail fs_26 fw_500" style="color: #FDD07F"
                  @click.stop="sheep.$router.go('/pages/public/richtext',{id:4,title:'会员权益'})"
            >
              查看详情
            </view>
            <view class="button_vip flex flex-row align-center justify-center" @click.stop="openImmediately">
              立即开通
            </view>
          </view>
        </template>
      </s-popup-vip>
    </view>
  </view>
</template>

<script setup>
  import { computed, nextTick, onMounted, reactive, ref } from 'vue';
  import sheep from '@/sheep';
  import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
  import PresentABouquet from '@/pages/genealogy/components/presentABouquet.vue';
  import FlowersList from '@/pages/genealogy/components/flowers.vue';
  import Scrolling from '@/pages/genealogy/components/scrolling.vue';
  import SHeaderTitle from '@/sheep/components/s-header-title/s-header-title.vue';
  import debounce from '@/sheep/helper/debounce';
  import SImagePreview from '@/sheep/components/s-image-preview/s-image-preview.vue';

  // #ifdef H5
  const systemInfo = computed(() => uni.getSystemInfoSync());
  // #endif
  // #ifndef H5
  const systemInfo = computed(() => sheep.$platform.device);
  // #endif

  const page = reactive({
    options: {},
    scaleX: systemInfo.value.windowWidth / 750,
    nowTime: new Date().getTime(),
    bgPath: '',
    path: '',
    imageFlag: false,
    commentList: [],
    currentTime: 0,
    commentsFocus: false,
    commentsHeight: 0,
    commentsShow: false,
    commentsValue: '',
  });
  const vipDisposition = reactive({
    isShow: false,
    goodDetails: {},
  });

  const ancestralHall = reactive({
    ct_detail: {},
    leaveAMessageParams: {
      ancestral_id: '', page: 1, pagesize: 50, total: 0,
    },
    loveParams: {
      ancestral_id: '', page: 1, pagesize: 50, total: 0,
    },
    lampParams: {
      ancestral_id: '', page: 1, pagesize: 50, total: 0,
    },
    flowersParams: {
      ancestral_id: '', page: 1, pagesize: 50, total: 0,
    },
    barrageList: [],
    editList: [
      {
        name: '爱心',
        action: 'love',
      },
      {
        name: '献花',
        action: 'presentABouquet',
      },
      {
        name: '留言',
        action: 'leaveAMessage',
      },
    ],
    flowerList: [],
    ct_light: [],
    diyInfo: {},
    ct_flower: [],
    flower: [],
    articlesOfTribute: [],
  });

  const cm_time = computed(() => {
    if (ancestralHall.ct_detail.over_time < 0) {
      return '00:00:00';
    }
    let s = ancestralHall.ct_detail.over_time % 60;
    let m = Math.floor(ancestralHall.ct_detail.over_time / 60) % 60;
    let h = Math.floor(ancestralHall.ct_detail.over_time / 60 / 60);
    if (h < 10) {
      h = `0${h}`;
    }
    if (m < 10) {
      m = `0${m}`;
    }
    if (s < 10) {
      s = `0${s}`;
    }
    return `${h}:${m}:${s}`;
  });
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const nc_image_path = computed(() => sheep.$store('AI').nc_image_path);
  const scrollings = ref();
  const userInfo = computed(() => sheep.$store('user').userInfo);

  onLoad(async (options) => {
    setInterval(() => {
      page.currentTime = new Date().getTime() / 1000;
    }, 100);
    page.options = options;
    ancestralHall.ct_detail = JSON.parse(uni.getStorageSync('aliveDetail'));
    ancestralHall.leaveAMessageParams.ancestral_id = ancestralHall.ct_detail.id;
    ancestralHall.loveParams.ancestral_id = ancestralHall.ct_detail.id;
    ancestralHall.lampParams.ancestral_id = ancestralHall.ct_detail.id;
    ancestralHall.flowersParams.ancestral_id = ancestralHall.ct_detail.id;
    await lighten();
    getFooBeanConfig();
    await sheep.$api.genealogy.addAncestralGold({ alive_id: ancestralHall.ct_detail.id });
    uni.$on('presentABouquet', () => {
      ancestralHall.ct_detail.flower_num++;
    });
  });

  onMounted(async () => {
    await setBglightUp();
    await setBglightDown();

    await flowers();
  });

  onShow(async () => {
    let { data } = await sheep.$api.genealogy.aliveDetail({
      type: 2,
      alive_id: ancestralHall.ct_detail.id,
    });
    ancestralHall.ct_detail = data;
    // if(!!ancestralHall.ct_detail){
    //   lighten();
    //   flowers();
    // }
    nextTick(async () => {
      uni.$emit('setAllNone');
      ancestralHall.barrageList = [];
      await getLeaveAMessageList();
      await getLoveList();
      await getLampList();
      await getFlowersList();
    });


    let changeBackground = uni.getStorageSync('changeBackground');
    if (!!changeBackground) {
      nextTick(() => {
        uni.showLoading({
          title: '切换中...',
        });
        ancestralHall.ct_detail.background_url = changeBackground;
        setTimeout(async () => {
          await setBglightUp();
          await setBglightDown();
          uni.removeStorageSync('changeBackground');
        }, 100);
      });
    }
  });

  onUnload(() => {
    uni.$off('presentABouquet');
  });


  // 获取元宝配置
  function getFooBeanConfig() {
    sheep.$api.genealogy.diyUserInfo().then(res => {
      ancestralHall.diyInfo = res.data;
    });
  }

  async function getLeaveAMessageList() {
    let { data } = await sheep.$api.genealogy.get_leaving_messages(ancestralHall.leaveAMessageParams);
    data.data.forEach(item => {
      ancestralHall.barrageList.push(`${item.username}留言: ${item.content}`);
    });
  }

  async function getLoveList() {
    let { data } = await sheep.$api.genealogy.getClickLoveRecord(ancestralHall.loveParams);
    data.data.forEach(item => {
      ancestralHall.barrageList.push(`${item.username}点了爱心`);
    });
  }

  // 获取长明灯列表
  async function getLampList() {
    let { data } = await sheep.$api.genealogy.getLampRecord(ancestralHall.lampParams);
    data.list.data.forEach(item => {
      ancestralHall.barrageList.push(`${item.username}点亮了长明灯`);
    });
  }

  async function getFlowersList() {
    let { data } = await sheep.$api.genealogy.getGiftRecord(ancestralHall.flowersParams);
    data.data.forEach(item => {
      ancestralHall.barrageList.push(`${item.username}献了${item.name}`);
    });
  }

  // 未点亮的背景
  async function setBglightUp() {
    const ctx = uni.createCanvasContext('lightingBackground');
    ctx.setFillStyle('#FFFFFF');
    ctx.fillRect(0, 0, systemInfo.value.windowWidth, systemInfo.value.windowHeight);
    ctx.save();
    console.log('背景路径=>', ancestralHall.ct_detail);
    let bg = await getImageInfo(!!ancestralHall.ct_detail.background_url ? ancestralHall.ct_detail.background_url : `${IMG_URL.value}/index/citang_bg.png`);
    ctx.drawImage(bg.path, 0, 0, systemInfo.value.windowWidth, systemInfo.value.windowHeight);
    ctx.save();

    ctx.setFillStyle('rgba(0,0,0,0.4)');
    ctx.fillRect(0, 0, systemInfo.value.windowWidth, systemInfo.value.windowHeight);
    ctx.save();

    ctx.draw(true, () => {
      uni.canvasToTempFilePath({
        canvasId: 'lightingBackground',
        success: res => {
          page.imageFlag = false;
          setTimeout(() => {
            page.imageFlag = true;
          }, 100);
          page.bgPath = res.tempFilePath;
          uni.hideLoading();
        },
      });
    });
  }

  // 已点亮的背景
  async function setBglightDown() {
    const ctx = uni.createCanvasContext('lighting');
    ctx.setFillStyle('#FFFFFF');
    ctx.fillRect(0, 0, systemInfo.value.windowWidth, systemInfo.value.windowHeight);
    ctx.save();
    console.log('背景路径=>', ancestralHall.ct_detail);
    let bg = await getImageInfo(!!ancestralHall.ct_detail.background_url ? ancestralHall.ct_detail.background_url : `${IMG_URL.value}/index/citang_bg.png`);
    ctx.drawImage(bg.path, 0, 0, systemInfo.value.windowWidth, systemInfo.value.windowHeight);
    ctx.save();

    ctx.draw(true, () => {
      uni.canvasToTempFilePath({
        canvasId: 'lighting',
        success: res => {
          page.imageFlag = false;
          setTimeout(() => {
            page.imageFlag = true;
          }, 100);
          page.path = res.tempFilePath;
          uni.hideLoading();
        },
      });
    });
  }

  // 获取图片信息
  function getImageInfo(src) {
    return new Promise((resolve, reject) => {
      uni.getImageInfo({
        src,
        success: (res) => {
          resolve(res);
        },
      });
    });
  }

  async function lighten() {
    let { data, status, msg } = await sheep.$api.genealogy.aliveDetail({
      type: 2,
      alive_id: ancestralHall.ct_detail.id,
    });
    getFooBeanConfig();
    ancestralHall.ct_detail = data;
    ancestralHall.editList[0].num = ancestralHall.ct_detail.love_num;
    ancestralHall.editList[2].num = ancestralHall.ct_detail.leave;
    if (!!ancestralHall.time) {
      clearInterval(ancestralHall.time);
    }
    ancestralHall.time = setInterval(() => {
      ancestralHall.ct_detail.over_time--;
    }, 1000);
  }

  async function flowers() {
    let { data, status, msg } = await sheep.$api.genealogy.getAncestralFlower({
      ancestral_id: ancestralHall.ct_detail.id,
    });
    ancestralHall.flower = data;
    getFooBeanConfig();
  }

  const presentABouquets = ref();

  // 点亮长明灯
  async function lighting() {
    if (!!page.options.family_id) {
      const { code, msg } = await sheep.$api.family.checkAuth({
        family_id: page.options.family_id,
        action: 'add',
      });
      if (code != 1) {
        sheep.$helper.toast(msg);
        return;
      }
      ancestralHall.ct_light = await getConfiguration(1);
      presentABouquets._value.show();
    } else if (!!page.options.genealogy_id) {
      const { code, msg } = await sheep.$api.genealogy.checkAuth({
        genealogy_id: page.options.genealogy_id,
        action: 'add',
      });
      if (code != 1) {
        sheep.$helper.toast(msg);
        return;
      }
      ancestralHall.ct_light = await getConfiguration(1);
      presentABouquets._value.show();
    } else {
      ancestralHall.ct_light = await getConfiguration(1);
      presentABouquets._value.show();
    }

  }

  async function getConfiguration(goods_type) {
    let { data } = await sheep.$api.genealogy.getConfigFlower({
      type: 1,
      goods_type,
    });
    data.sort((a, b) => {
      return a.integral - b.integral;
    });
    return data;
  }

  const flowerss = ref();

  async function edit(index) {
    switch (ancestralHall.editList[index].action) {
      case 'love':
        if (!!page.options.family_id) {
          const { code, msg } = await sheep.$api.family.checkAuth({
            family_id: page.options.family_id,
            action: 'add',
          });
          if (code != 1) {
            sheep.$helper.toast(msg);
            return;
          }
          sheep.$api.genealogy.clickLove({
            ancestral_id: ancestralHall.ct_detail.id,
          }).then(res => {
            ancestralHall.ct_detail.love_num++;
          });
        } else if (!!page.options.genealogy_id) {
          const { code, msg } = await sheep.$api.genealogy.checkAuth({
            genealogy_id: page.options.genealogy_id,
            action: 'add',
          });
          if (code != 1) {
            sheep.$helper.toast(msg);
            return;
          }
          sheep.$api.genealogy.clickLove({
            ancestral_id: ancestralHall.ct_detail.id,
          }).then(res => {
            ancestralHall.ct_detail.love_num++;
          });
        } else {
          sheep.$api.genealogy.clickLove({
            ancestral_id: ancestralHall.ct_detail.id,
          }).then(res => {
            ancestralHall.ct_detail.love_num++;
          });
        }
        break;
      case 'presentABouquet':
        if (!!page.options.family_id) {
          const { code, msg } = await sheep.$api.family.checkAuth({
            family_id: page.options.family_id,
            action: 'add',
          });
          if (code != 1) {
            sheep.$helper.toast(msg);
            return;
          }
          ancestralHall.ct_flower = await getConfiguration(2);
          ancestralHall.articlesOfTribute = await getConfiguration(3);
          flowerss._value.show();
        } else if (!!page.options.genealogy_id) {
          const { code, msg } = await sheep.$api.genealogy.checkAuth({
            genealogy_id: page.options.genealogy_id,
            action: 'add',
          });
          if (code != 1) {
            sheep.$helper.toast(msg);
            return;
          }
          ancestralHall.ct_flower = await getConfiguration(2);
          ancestralHall.articlesOfTribute = await getConfiguration(3);
          flowerss._value.show();
        } else {
          ancestralHall.ct_flower = await getConfiguration(2);
          ancestralHall.articlesOfTribute = await getConfiguration(3);
          flowerss._value.show();
        }
        break;
      case 'leaveAMessage':
        // if (!!page.options.family_id) {
        //   sheep.$router.go('/pages/genealogy/ct_edit', {
        //     index:3, id: ancestralHall.ct_detail.id,
        //     name: ancestralHall.ct_detail.username,
        //     family_id: page.options.family_id,
        //   });
        // } else if (!!page.options.genealogy_id) {
        //   sheep.$router.go('/pages/genealogy/ct_edit', {
        //     index:3, id: ancestralHall.ct_detail.id,
        //     name: ancestralHall.ct_detail.username,
        //     genealogy_id: page.options.genealogy_id,
        //   });
        // } else {
        //   sheep.$router.go('/pages/genealogy/ct_edit', {
        //     index:3, id: ancestralHall.ct_detail.id,
        //     name: ancestralHall.ct_detail.username,
        //   });
        // }
        page.commentsShow = true;
        page.commentsFocus = true;
        break;
    }
  }

  function goRecords() {
    if (!!page.options.family_id) {
      sheep.$router.go('/pages/genealogy/ct_edit', {
        index: 3, id: ancestralHall.ct_detail.id,
        name: ancestralHall.ct_detail.username,
        family_id: page.options.family_id,
      });
    } else if (!!page.options.genealogy_id) {
      sheep.$router.go('/pages/genealogy/ct_edit', {
        index: 3, id: ancestralHall.ct_detail.id,
        name: ancestralHall.ct_detail.username,
        genealogy_id: page.options.genealogy_id,
      });
    } else {
      sheep.$router.go('/pages/genealogy/ct_edit', {
        index: 3, id: ancestralHall.ct_detail.id,
        name: ancestralHall.ct_detail.username,
      });
    }
  }

  function goPath(index) {

  }

  const imagePreview = ref();

  async function setAvatar() {
    imagePreview.value.openPopup({
      imageUrl: ancestralHall.ct_detail.image,
      confirm: async (res) => {
        const { code, msg } = await sheep.$api.genealogy.checkAuth({
          genealogy_id: page.options.genealogy_id,
          action: 'add',
        });
        if (code != 1) {
          sheep.$helper.toast(msg);
          return;
        }
        uni.chooseImage({
          count: 1,
          success: async res => {
            uni.$once('SET_AVATAR', (res) => {
              ancestralHall.ct_detail.image = res;
            });
            uni.setStorageSync('ancestralHallSrc', res.tempFilePaths[0]);
            sheep.$router.go('/pages/commission/setAvatar', { id: ancestralHall.ct_detail.id });
            imagePreview.value.closePopup();
          },
        });
      },
    });
  }

  async function toggleBG() {
    if (!!page.options.family_id) {
      const { code, msg } = await sheep.$api.family.checkAuth({
        family_id: page.options.family_id,
        action: 'add',
      });
      if (code != 1) {
        sheep.$helper.toast(msg);
        return;
      }
      uni.setStorageSync('backgroundBgCitang', ancestralHall.ct_detail.background_url);
      sheep.$router.go('/pages/genealogy/changeBackground', { id: ancestralHall.ct_detail.id });
    } else if (!!page.options.genealogy_id) {
      const { code, msg } = await sheep.$api.genealogy.checkAuth({
        genealogy_id: page.options.genealogy_id,
        action: 'add',
      });
      if (code != 1) {
        sheep.$helper.toast(msg);
        return;
      }
      uni.setStorageSync('backgroundBgCitang', ancestralHall.ct_detail.background_url);
      sheep.$router.go('/pages/genealogy/changeBackground', { id: ancestralHall.ct_detail.id });
    } else {
      uni.setStorageSync('backgroundBgCitang', ancestralHall.ct_detail.background_url);
      sheep.$router.go('/pages/genealogy/changeBackground', { id: ancestralHall.ct_detail.id });
    }
  }

  function exchangeImmediately() {
    sheep.$router.go('/pages/vip/memberCenter');
  }

  async function goVip() {
    const { data } = await sheep.$api.goods.ids({ ids: '10' });
    vipDisposition.goodDetails = data[0];
    vipDisposition.isShow = true;
  }

  function closePopup() {
    vipDisposition.isShow = false;
  }

  async function openImmediately() {
    let obj = {};
    let arr = [];
    arr.push({
      goods_id: vipDisposition.goodDetails.id,
      goods_num: 1,
      goods_sku_price_id: vipDisposition.goodDetails.id,
    });
    obj.goods_list = arr;
    obj.is_from = 1;
    obj.order_type = 'goods';
    const { code, data } = await sheep.$api.order.create(obj);
    uni.redirectTo({
      url: `/pages/pay/index?orderSN=${data.order_sn}&flag=1`,
    });
  }

  async function commentBlur() {
    if (page.commentsValue == '') {
      setTimeout(() => {
        page.commentsShow = false;
      });
    }
    page.commentsFocus = false;
  }

  async function publishComments() {
    if (page.commentsValue == '') {
      sheep.$helper.toast('请输入留言内容');
      return;
    }
    if (!!page.options.genealogy_id) {
      let { code, msg } = await sheep.$api.genealogy.leaving_message({
        ancestral_id: ancestralHall.ct_detail.id,
        content: page.commentsValue,
      });
      if (code != 1) {
        sheep.$helper.toast(msg);
        return;
      }
      uni.$emit('setWorkingArea', `${userInfo.value.nickname}:${page.commentsValue}`);
      sheep.$helper.toast('留言成功');
      page.commentsValue = '';
      page.commentsFocus = false;
      page.commentsShow = false;
    }
  }
</script>

<style lang="scss">
  .ct_detail_image {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .countdown {
    font-weight: 500;
    font-size: 20rpx;
    color: #FFFFFF;
    position: fixed;
    bottom: 258rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: url($uni-bg-url-sq + "/index/eternalLamp_bg.png") no-repeat;
    background-size: 100% 100%;
  }

  .bottomButton {
    width: 215rpx;
    height: 57rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #FFDBB8;
    z-index: 10;
    background: url($uni-bg-url-sq + "/index/eternalLamp_bg_center.png") no-repeat;
    background-size: 100% 100%;
  }


  .bottomPopup {
    width: 539rpx;
    position: fixed;
    bottom: 60rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    .list {
      width: 121rpx;
      height: 167rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #AC5135;
      background: url($uni-bg-url-sq + "/index/eternalLamp_bg_list.png") no-repeat;
      background-size: 100% 100%;
    }
  }

  .unlit {
    width: 750rpx;
    height: 100vh;
    //position: relative;

    .deng {
      width: 750rpx;
      z-index: 1;

      image {
        width: 192rpx;
        //height: 423rpx;
      }
    }

    .avatar {
      position: relative;
      width: 295rpx;
      height: 457rpx;
      margin-top: -75rpx;

      .content {
        margin-top: 26rpx;
        width: 250rpx;
        height: 345rpx;
      }

      .pictureFrame {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 295rpx;
        height: 457rpx;
      }

      .name {
        position: absolute;
        bottom: 27rpx;
        left: 50%;
        transform: translateX(-50%);
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
        white-space: nowrap;
      }
    }

    .lazhu {
      width: 710rpx;
      margin-top: -140rpx;
      z-index: 1;

      image {
        width: 216rpx;
        height: 216rpx;
      }
    }

    .zhuozi {
      margin-top: -50rpx;

      image {
        width: 840rpx;
        height: 439rpx;
      }
    }

    .flowersList {
      position: absolute;
      top: 930rpx;
      width: 702rpx;
      height: 140.4rpx;

      image {
        width: 140.4rpx;
        height: 140.4rpx;
      }
    }
  }

  .toggle {
    position: fixed;
    top: 50%;
    left: 17rpx;
    transform: translateY(-50%);
    width: 71rpx;
    height: 71rpx;
    background: rgba(255, 226, 196, 0.3);
    border-radius: 50%;
    border: 3rpx solid #E8C38A;
    z-index: 1;

    image {
      width: 34rpx;
      height: 32rpx;
    }
  }

  .fixed {
    position: fixed;
  }

  .memberPopup {
    width: 750rpx;
    height: 789rpx;

    .exchange {
      width: 325rpx;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 140rpx;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: bold;
      font-size: 24rpx;
      color: #DA5E2A;
      padding: 0 0 5rpx 0;
    }
  }

  .button_vip {
    position: absolute;
    left: 50%;
    bottom: 110rpx;
    transform: translate(-50%, 0);
    width: 269rpx;
    height: 82rpx;
    background: url($uni-bg-url + '/nc_vip_button.png') no-repeat;
    background-size: 269rpx 82rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 41rpx;
    color: #FF4206;
  }

  .chatDetail {
    position: absolute;
    left: 50%;
    bottom: 270rpx;
    transform: translate(-50%, 0);
  }

  .photoDetails_comments {
    width: 750rpx;
    background: #FFFFFF;
    padding: 22rpx 0 42rpx 0;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    .photoDetails_comments_left {
      width: 540rpx;
      //height: 80rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      border: 1rpx solid #707070;
      padding: 20rpx 20rpx 20rpx 20rpx;

      .photoDetails_comments_left_input {
        width: 537rpx;
        min-height: 40rpx;
        max-height: 150rpx;
      }
    }

    .photoDetails_comments_right {
      width: 115rpx;
      height: 80rpx;
      background: #9F9F9F;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      //border: 1rpx solid #707070;

      .photoDetails_comments_right_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 23rpx;
        color: #FFFFFF;
      }
    }
  }
</style>
